<template>
  <div
    class="login-container"
    :style="{ 'background-image': `url(${require('@/assets/images/bg.jpg')})` }"
  >
    <el-form
      ref="form"
      class="login-form"
      autocomplete="off"
      :model="loginModel"
      :rules="rules"
    >
      <div class="title-container">
        <img src="@/assets/images/logo.png" />
        <span> XXX管理系统 </span>
      </div>
      <el-form-item prop="accountNo">
        <i class="el-icon-user"></i>
        <el-input
          placeholder="请输入账号"
          v-model="loginModel.accountNo"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="userPwd">
        <i class="el-icon-lock"></i>
        <el-input
          placeholder="请输入密码"
          v-model="loginModel.userPwd"
          clearable
          show-password
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button :loading="loading" type="primary" @click="onSubmit">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as API from "@/api/authorization";
import { setToken, setAccountNo } from "@/utils/auth";
export default {
  data() {
    return {
      loginModel: {
        accountNo: "",
        userPwd: "",
      },
      rules: {
        accountNo: [{ required: true, message: "请输入账号", trigger: "blur" }],
        userPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loading: false,
    };
  },

  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          API.login({
            accountNo: this.loginModel.accountNo.trim(),
            password: this.loginModel.userPwd,
          })
            .then((res) => {
              setToken(`${res.token_type} ${res.token}`);
              setAccountNo(this.loginModel.accountNo.trim());
              this.$router.push({
                path: this.redirect || "/",
              });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;

  .login-form {
    width: 400px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 0px 5px 5px #f8f8f8;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    :deep(.el-input) {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: #fff;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        height: 47px;
      }
    }

    :deep(.el-form-item) {
      border: 1px solid rgba(255, 255, 255, 1);
      background: white;
      border-radius: 5px;
      color: #000;

      i {
        font-size: 20px;
        margin-left: 10px;
      }

      button {
        width: 100%;
      }
    }
  }
}

.title-container {
  position: relative;
  margin: 0px auto 40px auto;
  text-align: center;
  img {
    height: 40px;
  }
  span {
    font-size: 36px;
    color: #000;

    text-align: center;
    font-weight: bold;
  }
}
</style>